<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <table border="1" width="400" id="tb-data">
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>身高</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <script>
      let data = [
        { name: '张衡', age: 40, gender: '男', height: 175 },
        { name: '花木兰', age: 20, gender: '女', height: 165 },
        { name: '张仲景', age: 35, gender: '男', height: 170 },
        { name: '武则天', age: 30, gender: '女', height: 168 },
        { name: '孙膑', age: 38, gender: '男', height: 170 },
        { name: '张仪', age: 43, gender: '男', height: 175 },
        { name: '魏然', age: 40, gender: '男', height: 175 },
        { name: '张雅雯', age: 20, gender: '女', height: 165 },
        { name: '章邯', age: 35, gender: '男', height: 170 },
        { name: '田言', age: 30, gender: '女', height: 168 },
        { name: '端木月', age: 38, gender: '女', height: 170 },
        { name: '芈月', age: 43, gender: '女', height: 175 },
        { name: '白起', age: 40, gender: '男', height: 175 },
        { name: '念清', age: 20, gender: '女', height: 165 },
        { name: '顾清恒', age: 30, gender: '男', height: 185 },
        { name: '惊鲵', age: 30, gender: '女', height: 168 },
        { name: '无名', age: 38, gender: '男', height: 180 },
        { name: '伏念', age: 43, gender: '男', height: 175 },
      ]
      const tbody = document.querySelector('#tb-data tbody')
      function processData(mydata) {
        tbody.innerHTML = ''
        for (let item of data) {
          let tr = document.createElement('tr')
          tr.innerHTML =
            '<td>' +
            item.name +
            '</td><td>' +
            item.age +
            '</td><td>' +
            item.gender +
            '</td><td>' +
            item.height +
            '</td>'
          tbody.appendChild(tr)
        }
      }
      processData(data)

      function getPageData(pageNo = 1, pagesize = 3) {
        let start = (pageNo - 1) * pagesize
        let end = pageNo * pagesize
        let result = data.splice(start, end)
        return result
      }
      console.log(getPageData())
    </script>
  </body>
</html>
